/**
 * 商品方法显示
 */

import Taro from '@tarojs/taro'
import React, { useState } from 'react'
import { Popup } from '@/components/Popup';
import { View, Input } from '@tarojs/components'
import { network } from "@/utils/network";

import './index.scss'
import { ButtonEle, ButtonType } from '@/components/Buttton'


export interface INickNameProps {
    title: string
    vis: boolean
    nickName: string
    onClose: () => void,
    fetchUserInfo: () => void
}
export const NickNameModal: React.FC<INickNameProps> = (
    prop
) => {
    const [val, setVal] = useState<string | null>(null);

    const updateNick = (nickName) => {
        network.post('/xxm/user/update', { nickName }).then(res => {
            if (res.code === 0) {
                Taro.showToast({
                    title: '更新成功',
                    icon: 'success'
                });
                prop.onClose();
                prop.fetchUserInfo();
            };
        })
        
    }

    return (
        <Popup
            visible={prop.vis}
            position="center"
            round
            onClose={prop.onClose}
            closeOnClickOverlay
            customStyle={{
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0
            }}
        >
            <View className="xxm-nickname-view-ele">
                <View className='xxm-nickname-view-title'>{prop.title}</View>
                <View className='xxm-nickname-view-input'>
                    <Input value={val ?? prop.nickName} type='nickname' onInput={(e: any) => { setVal(e.detail.value) }} placeholder='最大输入长度为 10' maxLength='10' />
                </View>
                <View className="xxm-nickname-view-ele__footer">
                    <ButtonEle
                        type={ButtonType.CANCEL}
                        block
                        square
                        onClick={() => {
                            prop.onClose()
                        }}
                    >关闭</ButtonEle>
                    <ButtonEle
                        type={ButtonType.DANGE}
                        block
                        square
                        onClick={() => {
                            if(val?.length === 0) {
                                Taro.showToast({
                                    icon: 'none',
                                    title: '昵称不能为空',
                                });
                                return;
                            }
                            if (val?.length > 10) {
                                Taro.showToast({
                                    icon: 'none',
                                    title: '昵称最大输入长度为10',
                                });
                                return;
                            }
                            updateNick(val);
                        }}
                    >确定</ButtonEle>
                </View>
            </View>
        </Popup>
    )
}